<!DOCTYPE html> 
<html> 
	<head> 
	<meta name="viewport" content="width=device-width, initial-scale=1"> 
	<link rel="stylesheet" href="jquery.mobile-1.1.0.css" />
	<link rel="stylesheet" href="css/jquery.ui.all.css"/>
	<link rel="stylesheet" href="css/bigotes.css"/>
	<script src="jquery-1.7.2.js"></script>
	<script src="jquery.mobile-1.1.0.js"></script>
    <script src="jquery-ui.min.js"></script>
	<script src="jquery.tmpl.js"></script>
</head> 

<script id="foodItemTemplate" type="text/x-jquery-tmpl">
    <li class="searchItem" id=${Id} ><a href="#" data-rel="dialog" rel="external">
			<img src=${Img} />
			<h3>${Name}</h3>
			<p>${Description}</p>
	</a></li>
</script>


<script type="text/javascript"> 
	function addFoodItem(item){
		$( "#foodItemTemplate" ).tmpl( item )
        .appendTo( "#foodList" );
		$("#foodList").listview("refresh");
	}
	
	$(document).live("pageshow",function( event, data ){
	 var items = new Array();
		for (i=1;i<=3;i++)
		{
			var item=new Object();
			item.Id = i;
			item.Name="Fideos al hongo" + i;
			item.Description="Con buen aroma!" + i;
			item.Img="images/receta"+i+".jpg";
			items.push(item);
		}
		addFoodItem(items);
	});
	
	var onswipe = false;

	$( "#foodList li" ).live( "click",function(){ 
	// change click to swiperight to test swipe
		if(!onswipe){
			onswipe = true;
			
			var li;    
			li = $(this).hide();    
			var id=li.attr('id');
			var html=' <li class="controls" id="'+id+'"><h1>Comida</h1><button data-role="button" data-inline="true" class="ui-btn-corner-all ui-btn-up-b btncook" data-theme="b">Cocinar</button><button data-inline="true" data-role="button" class="ui-btn-corner-all ui-btn-up-b btningredients" data-theme="b">Ingredientes</button><button data-role="button" data-inline="true"  class="ui-btn-corner-all ui-btn-up-b btnaddrecipie" data-theme="b">Agregar a Mis Recetas</button><button type="button" data-inline="true" class="btncancel ui-btn-corner-all ui-btn-up-a" data-role="button" data-theme="a">Cancel</button></li>';
			$(this).after(html);
			//li = $(this).detach();    
			
			$("ul[id='foodList']").listview("refresh");
			
			$(".controls").unbind("tap click");
			$(".controls .btncook").click(function(e){
				//$.mobile.loadPage("#foodPopup", {reloadPage:true} );
				
				/*$.mobile.changePage("fideos.html#paso",{
					type: "get",
					reloadPage:true
				});
				*/
				window.location.href="step.html#paso?id="+id+"&step=0";
				//$.mobile.changePage( "fideos.html",{allowSamePageTransition:true,reloadPage:true});
				// $.mobile.changePage("#paso", {reloadPage:true} );
				
				onswipe = false;
			});
			
			$(".controls .btningredients").click(function(e){
				alert("Carne, Pollo y Verduras");
				
			});  
			$(".controls .btnaddrecipie").click(function(e){
				alert("Not Implented BETA");
				
			});  
			$(".controls .btncancel").click(function(e){
				
				onswipe = false;				
				$(".controls").remove();
				li.show();
				
				$("ul[id='foodList']").listview("refresh");
			});        			
			
		}
	});
	
</script>
<body> 

<div data-role="page" id="homeListing">
<div data-role="header" class="ui-bar">
		<h1 id="test">Bigotes HTML5</h1>
		<a href="index.html" data-role="button" data-icon="home" rel="external">Inicio</a>	
	</div><!-- /header -->
<div data-role="content">			
		<h2>Recetas</h2>
		<br/>
		<div class="content-primary">	
		<ul id="foodList" data-role="listview">		
		<ul>
		<div>
	</div><!-- /content -->
</div>
<div data-role="page" id="foodPopup">

	<div data-role="header" data-theme="e">
		<h1>Menu Receta</h1>
	</div><!-- /header -->

	<div data-role="content" data-theme="d">	
	    <a href="fideos.html#paso" data-role="button" data-inline="true" data-theme="b">Cocinar</a>
		<a href="#" data-role="button" data-inline="true" data-theme="b">Ingredientes</a>
		<a href="#" data-role="button" data-inline="true" data-theme="b">Agregar a Mis Recetas</a>
		<a href="#homeListing" data-role="button" data-inline="true" data-theme="b" >Cancelar</a>
	</div><!-- /content -->
	

</div><!-- /page popup -->

<div data-role="page" id="paso">
<div data-role="header" class="ui-bar">
		<h1>Bigotes HTML5</h1>
		<a href="index.html" data-role="button" data-icon="home">Inicio</a>	
		
	</div><!-- /header -->
<div data-role="content" >			
		<h2>Fideos Al hongo</h2>
		<h3>Paso 1</h3>
		<p>
		1  taza de esto
		2 cucharadas de 2 aquello
		100 gr de amnteca
		</p>
		<br/>
		<a href="#" data-role="button" data-inline="true" data-theme="b">Leer Paso</a>
		<a href="#" data-role="button" data-inline="true" data-theme="b">Siguiente Paso</a>
		<a href="#homeListing" data-role="button" data-inline="true" data-theme="b" >Cancelar</a>
	</div><!-- /content -->
</div>

</body>